import React from 'react';
import { StyleSheet, View, Text, StatusBarStyle } from 'react-native';
import {
  SafeAreaView, Edge, SafeAreaProvider, useSafeAreaInsets,
  useSafeAreaFrame, EdgeInsets, Rect, initialWindowMetrics
} from 'react-native-safe-area-context'

function App({ }): JSX.Element {

  const STYLES = ['default', 'dark-content', 'light-content'] as const;

  const [backColor, setBackColor] = React.useState("red");
  const [mode, setMode] = React.useState('margin');
  const [top, setTop] = React.useState(true);
  const [right, setRight] = React.useState(true);
  const [bottom, setBottom] = React.useState(true);
  const [left, setLeft] = React.useState(true);
  const [layout, setLayout] = React.useState('null');
  const [height, setHeight] = React.useState(100);
  const [insets, setInsets] = React.useState<EdgeInsets>();
  const [frame, setFrame] = React.useState<Rect>();
  const [statusBarStyle, setStatusBarStyle] = React.useState<StatusBarStyle>(
    STYLES[0],
  );
  const [hidden, setHidden] = React.useState(false);
  const [translucent, setTranslucent] = React.useState(true);


  let edges: Edge[] = [];


  const setEdges = () => {
    let arr = []
    if (top) {
      arr.push('top');
    }

    if (right) {
      arr.push('right');
    }
    if (bottom) {
      arr.push('bottom');
    }
    if (left) {
      arr.push('left');
    }

    edges = arr
  }



  setEdges();
  // initialWindowMetrics.frame;
  // initialWindowMetrics.insets;


  const PrintInsetsTestView = () => {
    setInsets(useSafeAreaInsets());
    setFrame(useSafeAreaFrame());
    return null;
  };

  return (
      <SafeAreaProvider
        hitSlop={{ top: 100, bottom: 100, left: 100, right: 100 }}
        initialMetrics={initialWindowMetrics}
        onTouchEnd={() =>
          setBackColor(backColor == 'red' ? 'green' : 'red')
        }
        onLayout={(e) => {
          setHeight(200)
        }}
        style={{
          backgroundColor: backColor,
          borderRadius: 20,
          flex: 0,
          height: height,
          width: 300
        }}>

        <View style={[styles.button, styles.margin20]}
          onTouchEnd={() =>
            setBackColor(backColor == 'red' ? 'green' : 'red')
          }>
          <Text style={styles.buttonText}>background:{backColor}</Text>
        </View>
      </SafeAreaProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  svgContainer: {
    width: '100%',
    height: 150,
  },
  label: {
    color: 'gray',
    width: '100%', // hack
    height: 20, // hack
  },
  button: {
    width: 160,
    height: 36,
    backgroundColor: 'hsl(190, 50%, 70%)',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  button80: {
    width: 80,
    height: 36,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  buttonText: {
    width: '100%',
    height: '100%',
    fontWeight: 'bold',
  },
  pagerView: {
    flex: 1,
    backgroundColor: 'hsl(190, 50%, 70%)',
    paddingTop: 24,
    margin: 24
  },
  margin20: {
    marginLeft: 20
  }
});



export default App;